<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <header>
      <div class="header-container">
        <h1>IT综合培优平台</h1>
        <el-menu :default-active="$route.name" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="frontHome">首页</el-menu-item>
          <el-menu-item index="video">视频学习</el-menu-item>
          <el-menu-item index="discussion">讨论区</el-menu-item>
          <el-menu-item index="competition">赛事通知</el-menu-item>
        </el-menu>
        <!-- 用户信息区域 -->
        <el-dropdown @command="dropdownChange" class="user-info">
          <span class="el-dropdown-link">
            <img :src="userInfo.imageUrl" class="user-avatar" />
            <span>{{ userInfo.nickName }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="个人信息">个人信息</el-dropdown-item>
            <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main>
      <router-view></router-view>
    </main>

    <!-- 底部 -->
    <footer>
      <div class="footer-container">
        <p>© 2024 IT综合培优平台 - All rights reserved.</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("user")) || {
        nickName: "访客",
        imageUrl: "https://via.placeholder.com/30",
      },
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push({ name: key });
    },
    dropdownChange(command) {
      if (command === "退出登录") {
        this.logout();
      } else if (command === "个人信息") {
        this.$router.push({ name: "userPersonInfo" });
      }
    },
    logout() {
      localStorage.removeItem("user");
      this.$router.push({ name: "login" });
    },
  },
};
</script>

<style>
/* 全局布局样式 */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: auto; /* 全局滚动条 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9fafb;
  color: #333;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保页面最小高度是视口高度 */
}

header {
  background-color: #cce4ff;
}

main {
  flex: 1; /* 主内容区域占满剩余空间 */
  background-color: #ffffff;
  padding: 20px;
  overflow-y: auto; /* 确保在内容多时有滚动条 */
}

footer {
  background-color: #cce4ff;
  text-align: center;
  padding: 10px 0;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  margin-left: auto;
  cursor: pointer;
}

.user-avatar {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  color: #333;
}

/* 头部样式 */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  color: #0c0c0c;
  padding: 15px 20px;
}

h1 {
  margin-right: 20px;
  font-size: 24px;
  font-weight: bold;
}

/* 导航按钮样式 */
.el-menu-item {
  color: #333;
}

.el-menu-item:hover {
  background-color: #f2f2f2;
}

.el-menu-item.is-active {
  color: #409EFF;
}

/* 底部样式 */
.footer-container {
  background-color: #cce4ff;
  color: #333;
}
</style>
